<template>
  <div class="annual--plan-container">
    <!-- 页面标题 -->
    <div class="container-box">
      <div class="main-title project-title">
        <span>{{ projectTitle }}</span>
            <span @click="()=>this.$router.back()" class="back-btn pointer"
              ><img src="../../assets/images/icon_comm_back.png" alt="" />返回</span
            >
      </div>
      <!-- 页面主体 -->
      <div class="main-content">
        <div class="right-title">
           <img src="../../assets/images/icon_16_title.png" alt="" /> 基本信息
        </div>
        <div clss="form-box">
          <el-form
            ref="queryForm"
            inline
            label-position="right"
            label-width="118px"
            :model="queryForm"
            :rules="queryFormRules"
            size="small"
          >
            <el-row>
              <el-form-item label="评审任务名称" required>
                <el-input
                  v-model="queryForm.taskName"
                  maxlength="16"
                  placeholder="请输入项目名称"
                  clearable
                />
              </el-form-item>
              <el-form-item label="评审类别" required>
                <el-select
                  disabled
                  v-model="queryForm.reviewType"
                  placeholder="请选择评审类别"
                >
                  <el-option label="方案评审" value="0" />
                  <el-option label="年度项目清单评审" value="1" />
                </el-select>
              </el-form-item>
              <el-form-item label="评审时间" required>
                <!-- <el-date-picker
                  v-model="reviewTime"
                  type="datetimerange"
                  range-separator="至"
                  start-placeholder="开始日期"
                  end-placeholder="结束日期"
                  @change="checkTime"
                  value-format="yyyy-MM-dd HH:mm:ss"
                  align="left"
                >
                </el-date-picker> -->
                <el-date-picker
                  v-model="reviewTime"
                  @change="onChangeTime"
                  value-format="yyyy-MM-dd HH:mm:ss"
                  align="left"
                  style="width:100%"
                >
                </el-date-picker>
              </el-form-item>
              <!-- </el-row>
            <el-row> -->
              <el-form-item label="评审地点" required>
                <el-input
                  v-model="queryForm.reviewAddress"
                  maxlength="16"
                  placeholder="请输入评审地点"
                  clearable
                />
              </el-form-item>
              <el-form-item label="专家数量" required>
                <el-select
                  v-model="queryForm.expertNum"
                  placeholder="请选择专家数量"
                  clearable
                >
                  <el-option label="3" value="3" />
                  <el-option label="5" value="5" />
                  <el-option label="7" value="7" />
                  <el-option label="9" value="9" />
                </el-select>
              </el-form-item>
            </el-row>
          </el-form>
        </div>
        <div class="right-title">
          <img src="../../assets/images/icon_16_title.png" alt="" /> 抽取规则
        </div>
        <div class="add-btn" @click="rulesAdd">
          <img src="../../assets/images/icon_from_add.png" alt="" />新增规则
        </div>
        <div class="table-box">
          <el-table
            ref="table"
            border
            cell-class-name="table-cell"
            class="list-table"
            :data="tableData"
            header-cell-class-name="table-header-cell"
            header-row-class-name="table-header"
            :loading="loading"
            show-header-overflow="ellipsis"
            show-overflow="tooltip"
          >
            <el-table-column
              v-for="(item, index) in tableColumn"
              :key="item.field"
              :prop="item.field"
              :label="item.title"
              :index="index"
            >
              <template slot-scope="scope">
                {{
                  item.field == "extractType"
                    ? scope.row.extractType == 1
                      ? "条件抽取"
                      : scope.row.extractType == 2
                      ? "随机抽取"
                      : "指定专家"
                    : item.field == "extractRuleDesc"
                    ? scope.row.extractRuleDesc
                      ? scope.row.extractRuleDesc
                      : "-"
                    : scope.row[item.field]
                }}
              </template>
            </el-table-column>
            <el-table-column header-align="center" label="操作" width="200">
              <template slot-scope="scope">
                <el-button
                  class="btn-text"
                  size="small"
                  type="text"
                  @click="handleClick(scope.$index, scope.row)"
                >
                  修改
                </el-button>
                <el-button
                  class="btn-text"
                  size="small"
                  type="text"
                  @click="handleDel(scope.$index, scope.row)"
                >
                  删除
                </el-button>
              </template>
              <!-- <div style="display: flex; justify-content: center">
                </div> -->
            </el-table-column>
          </el-table>
        </div>
        <div class="bottom-btn">
          <div class="start-btn">
            <el-button @click="startPumping" :disabled="isDisabled"
              >开始抽取</el-button
            >
          </div>
          <div class="reset-btn">
            <el-button @click="replaceCheck">重新抽取</el-button>
          </div>
          <div class="hint">
            *重新抽取次数不允许超过2次，超过将被视为违规操作
          </div>
        </div>
      </div>

      <el-dialog
        title="编辑规则"
        :visible.sync="dialogVisible"
        width="628px"
        :before-close="handleClose"
        custom-class="dialog-box"
      >
        <el-form
          :model="ruleForm"
          :rules="rules"
          ref="ruleForm"
          label-width="100px"
          class="demo-ruleForm"
        >
          <el-form-item label="抽取类型" prop="extractType">
            <el-select
              v-model="ruleForm.extractType"
              placeholder="请选择抽取类型"
              @change="changeType"
              style="width:100%"
              clearable
            >
              <el-option
                v-for="(dict,index) in extractTypeData"
                :label="dict.dictLabel"
                :value="dict.dictValue"
                :key="index"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="专家数量" prop="peopleNumber">
            <el-select
              v-model="ruleForm.peopleNumber"
              placeholder="请选择专家数量"
              style="width:100%"
              clearable
            >
              <el-option v-for="(n,i) in 9" :label="n" :key="i" :value="n" />
            </el-select>
          </el-form-item>
          <el-row
            :gutter="10"
            class="mb20 mt5"
            v-show="ruleForm.extractType == '1'"
          >
            <el-col :span="1.5">
              <el-button
                type="primary"
                icon="el-icon-plus"
                size="small"
                @click="addPerRow"
                >添加条件</el-button
              >
            </el-col>
          </el-row>
          <el-table
            v-loading="loading"
            :data="editPerDataList"
            v-show="ruleForm.extractType == 1"
            border
            class="info-select"
            >
            <el-table-column label="指标名称" align="center" width="168">
              <template slot-scope="scope">
                <span v-show="!scope.row.show">{{ scope.row.extracName }}</span>
                <el-select
                  v-show="scope.row.show"
                  v-model="scope.row.extracName"
                  placeholder="请选择"
                  @change="changeIndicators(scope.row)"
                >
                  <el-option
                    v-for="item in perNameOptions"
                    :key="item.dictValue"
                    :label="item.dictLabel"
                    :value="item.dictLabel"
                  >
                  </el-option>
                </el-select>
              </template>
            </el-table-column>
            <el-table-column
              label="规则"
              align="center"
              :show-overflow-tooltip="true"
            >
              <template slot-scope="scope">
                <div v-show="!scope.row.show || IndicatorsShow">
                  {{ scope.row.peopleNumber }}
                </div>
                <div v-show="!IndicatorsShow">
                  <el-select
                    v-show="scope.row.show"
                    v-model="scope.row.peopleNumber"
                    placeholder="请选择"
                  >
                    <el-option
                      v-for="item in contrastList"
                      :key="item.dictValue"
                      :label="item.dictLabel"
                      :value="item.dictLabel"
                    >
                    </el-option>
                  </el-select>
                </div>
              </template>
            </el-table-column>
            <el-table-column label="指标内容" align="center" width="168">
              <template slot-scope="scope">
                <span v-show="!scope.row.show">{{
                  scope.row.extractRuleDesc
                    ? scope.row.extractRuleDesc.toString()
                    : ""
                }}</span>
                <!--专业  -->
                <el-select
                  v-show="
                    scope.row.show &&
                    IndicatorsShow &&
                    scope.row.extracName == '专业'
                  "
                  v-model="scope.row.extractRuleDesc"
                  placeholder="请选择专业"
                  value-key="id"
                  multiple
                >
                  <el-option
                    v-for="item in majorList"
                    :key="item.dictValue"
                    :label="item.dictLabel"
                    :value="item.dictLabel"
                  >
                  </el-option>
                </el-select>
                <!-- 职业资格 -->
                <el-select
                  v-show="
                    scope.row.show &&
                    IndicatorsShow &&
                    scope.row.extracName == '职业资格'
                  "
                  v-model="scope.row.extractRuleDesc"
                  placeholder="请选择专业"
                  value-key="id"
                  multiple
                >
                  <el-option
                    v-for="item in professionalList"
                    :key="item.dictValue"
                    :label="item.dictLabel"
                    :value="item.dictLabel"
                  >
                  </el-option>
                </el-select>
                <!-- 擅长领域 -->
                <el-select
                  v-show="
                    scope.row.show &&
                    IndicatorsShow &&
                    scope.row.extracName == '擅长领域'
                  "
                  v-model="scope.row.extractRuleDesc"
                  placeholder="请选择专业"
                  value-key="id"
                  multiple
                >
                  <el-option
                    v-for="item in areasList"
                    :key="item.dictValue"
                    :label="item.dictLabel"
                    :value="item.dictLabel"
                  >
                  </el-option>
                </el-select>
                <!-- 技术职称 -->
                <el-select
                  v-show="
                    scope.row.show &&
                    IndicatorsShow &&
                    scope.row.extracName == '技术职称'
                  "
                  v-model="scope.row.extractRuleDesc"
                  placeholder="请选择专业"
                  value-key="id"
                  multiple
                >
                  <el-option
                    v-for="item in technicalList"
                    :key="item.dictValue"
                    :label="item.dictLabel"
                    :value="item.dictLabel"
                  >
                  </el-option>
                </el-select>
                <!-- 正直面貌 -->
                <el-select
                  v-show="
                    scope.row.show &&
                    IndicatorsShow &&
                    scope.row.extracName == '政治面貌'
                  "
                  v-model="scope.row.extractRuleDesc"
                  placeholder="请选择专业"
                  value-key="id"
                >
                  <el-option
                    v-for="item in politicalOutlook"
                    :key="item.dictValue"
                    :label="item.dictLabel"
                    :value="item.dictLabel"
                  >
                  </el-option>
                </el-select>
                <!-- 性别 -->
                <el-select
                  v-show="
                    scope.row.show &&
                    IndicatorsShow &&
                    scope.row.extracName == '性别'
                  "
                  v-model="scope.row.extractRuleDesc"
                  placeholder="请选择专业"
                  value-key="id"
                >
                  <el-option
                    v-for="item in sexList"
                    :key="item.dictValue"
                    :label="item.dictLabel"
                    :value="item.dictLabel"
                  >
                  </el-option>
                </el-select>
                <el-input
                  v-show="
                    scope.row.show &&
                    !IndicatorsShow &&
                    scope.row.extracName == '年龄'
                  "
                  v-model="scope.row.age"
                  @blur="inputBlur(scope.row)"
                  placeholder="请填写年龄"
                ></el-input>
              </template>
            </el-table-column>
            <el-table-column
              label="操作"
              align="center"
              class-name="small-padding fixed-width"
            >
              <template slot-scope="scope">
                <el-button
                  v-show="scope.row.show"
                  size="mini"
                  type="text"
                  @click="handleSure(scope.row)"
                  >确认</el-button
                >
                <el-button
                  v-show="!scope.row.show"
                  size="mini"
                  type="text"
                  @click="handleRowEdit(scope.row)"
                  >编辑</el-button
                >
                <el-button
                  size="mini"
                  type="text"
                  @click.native.prevent="
                    deleteRow(scope.$index, editPerDataList)
                  "
                  >删除</el-button
                >
              </template>
            </el-table-column>
          </el-table>
          <el-form-item
            label="选择专家"
            prop="expertIdList"
            v-if="ruleForm.extractType == '3'"
            >
            <el-select
              v-model="ruleForm.expertIdList"
              placeholder="请选择专家"
              @change="selectExpert"
              multiple
              :multiple-limit="ruleForm.peopleNumber"
              style="width:100%"
              clearable
              filterable
            >
              <el-option
                v-for="dict in erxtList"
                :label="dict.expertName + ',' + dict.workUnit"
                :value="dict.expertId"
                :key="dict.expertId"
              >
              </el-option>
            </el-select>
          </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
          <el-button @click="handleClose">取 消</el-button>
          <el-button type="primary" @click="submit">确 定</el-button>
        </span>
      </el-dialog>
    </div>
    <div class="container-box person-info-box" v-if="personInfo!=null && personInfo.length > 0">
      <div>
        <div class="right-title">
          <img src="../../assets/images/icon_16_title.png" alt="" /> 专家信息
        </div>
        <div
          class="person-info"
          v-for="(item, index) in personInfo"
          :key="index"
        >
          <div class="person-left">
            <img src="../../assets/images/icon_expert-boy.png" alt="" />
            <div class="name-title">
              {{ item.expertName }}
            </div>
          </div>
          <div class="person-right">
            <div class="top-box">
              <div class="right-top">
                <div>
                  性别：<span>{{ item.sex === "0" ? "男" : item.sex === "1" ? "女":'' }}</span>
                </div>
                <div>
                  毕业学校：<span>{{ item.graduateCollege }}</span>
                </div>
                <div>
                  工作单位：<span>{{ item.workUnit }}</span>
                </div>
              </div>
              <div class="right-top">
                <div>
                  政治面貌：<span>{{
                    item.politicalOutlook === '0' ? "群众" : item.politicalOutlook === '1' ?"党员":''
                  }}</span>
                </div>
                <div>
                  专业：<span>{{ item.major }}</span>
                </div>
                <div>
                  职位：<span>{{ item.post }}</span>
                </div>
              </div>
              <div class="right-top">
                <div>
                  年龄：<span>{{ item.age }}</span>
                </div>
                <div>
                  学历：<span>{{ item.education }}</span>
                </div>
                <div>
                  擅长领域：<span>{{ item.areasOfExpertise }}</span>
                </div>
              </div>
            </div>
            <div class="bottom-box">
              <div>
                技术职称：<span>{{ item.technicalTitlesName }}</span>
              </div>
              <div>
                职业职称：<span>{{ item.qualificationsName }}</span>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="personI-info-btn">
        <div @click="backPage">返回</div>
        <div @click="submitForm">提交</div>
      </div>
    </div>
  </div>
</template>

<script>
import {
  getSxpertExtract,
  getTaskAdd,
  getReplaceExtract,
  geMonitoringGet
} from "@/api/manage/annualPlan";
import { getExtInfoList ,geMonitoringAdd} from "@/api/manage/manage";
export default {
  data() {
    return {
      projectTitle: "",
      rules: {
        extractType: [{ required: true, message: "请选择抽取类型", trigger: "change" }],
        peopleNumber: [
          { required: true, message: "请选择专家数量", trigger: "change" },
        ],
        expertIdList:[
          { required: true, message: "请选择专家", trigger: "change" },
        ],
      },
      // 查询参数
      queryForm: {},
      dialogVisible: false,
      loading: false,
      tableData: [
        // {key:'2022',key1:'当前年份++5'}
      ],
      queryFormRules: {},
      // 列表Tabs
      listType: "all",
      approveFlag: false,
      tableColumn: [
        { title: "抽取类型", field: "extractType" },
        { title: "人数", field: "peopleNumber" },
        { title: "抽取规则描述", field: "extractRuleDesc" },
      ],
      //默认规则数据
      editPerDataList: [],
      //指标名称
      perNameOptions: [
        { dictLabel: "性别", dictValue: "sex" },
        { dictLabel: "政治面貌", dictValue: "politicalOutlook" },
        { dictLabel: "年龄", dictValue: "age" },
        { dictLabel: "专业", dictValue: "major" },
        { dictLabel: "擅长领域", dictValue: "areasOfExpertise" },
        { dictLabel: "技术职称", dictValue: "technicalTitles" },
        { dictLabel: "职业资格", dictValue: "qualifications" },
      ],
      optionsArr: [], //指标内容的下拉选择数据
      majorList: [], //专业列表
      technicalList: [], //技术职称列表
      professionalList: [], //职业资格列表
      areasList: [], //擅长列表
      politicalOutlook: [
        { dictLabel: "群众", dictValue: "0" },
        { dictLabel: "党员", dictValue: "1" },
      ], //政治面貌列表
      sexList: [
        { dictLabel: "男", dictValue: "0" },
        { dictLabel: "女", dictValue: "1" },
      ], //性别列表
      conditions: [
        { title: "指标名称", field: "extractType1" },
        { title: "规则", field: "peopleNumber2" },
        { title: "指标内容", field: "extractRuleDesc3" },
      ],
      //表单
      ruleForm: {extractType:'',peopleNumber:'',expertIdList:[]},
      reviewTime: '', //时间
      extractTypeData: [],
      personInfo: [], //专家信息
      // expertList:[],//抽取列表
      isDisabled: false, //开始抽取禁用
      checkState: "",
      checkNum: 0, //重新抽取次数
      //规则下拉框
      contrastList: [
        { dictLabel: ">", dictValue: "0" },
        { dictLabel: "=", dictValue: "2" },
        { dictLabel: "<", dictValue: "1" },
      ],
      IndicatorsShow: true, //控制年龄输入框
      rulesData: {}, //抽取的规则数据
      erxtList: [], //专家列表
      selectExpertList: "", //选择的专家列表
    };
  },
  created() {
    let info = this.$route.query.info;
    let enterType = this.$route.query.enterType;
    if (enterType == "third") {
      this.projectTitle = "评审任务/任务详情/抽取专家";
    } else if (enterType == "manage") {
      this.projectTitle = "项目管理/项目详情/抽取专家";
    } else if (enterType == "annual") {
      this.projectTitle = "年度计划/年度项目计划/抽取专家";
    }
    this.getDicts("extract_type").then((res) => {
      this.extractTypeData = res.data;
    });
    //专业
    this.getDicts("major").then((res) => {
      this.majorList = res.data;
    });
    //技术职称
    this.getDicts("technical_type").then((res) => {
      this.technicalList = res.data;
    });
    //职业资格
    this.getDicts("professional_type").then((res) => {
      this.professionalList = res.data;
    });
    //擅长领域
    this.getDicts("areas_of_expertise").then((res) => {
      this.areasList = res.data;
    });
    this.getertList();
    this.$set(
      this.queryForm,
      "taskName",
      info.substring(0, info.lastIndexOf("."))
    );
    this.$set(
      this.queryForm,
      "reviewType",
      info.substring(info.lastIndexOf(".") + 1)
    );
    this.getMonitoring()
  },
  methods: {
    //条件查询 编辑按钮
    handleRowEdit(row) {
      switch (row.extractType) {
        case "专业":
          this.optionsArr = this.majorList;
          this.isMultiple = true;
          break;
        case "擅长领域":
          this.optionsArr = this.areasList;
          this.isMultiple = true;
          break;
        case "技术职称":
          this.optionsArr = this.technicalList;
          this.isMultiple = true;
          break;
        case "职业资格":
          this.optionsArr = this.professionalList;
          this.isMultiple = true;
          break;
        case "性别":
          this.optionsArr = this.sexList;
          this.isMultiple = false;
          break;
        case "政治面貌":
          this.optionsArr = this.politicalOutlook;
          this.isMultiple = false;
          break;
        case "年龄":
          this.IndicatorsShow = false;
          break;
        default:
          break;
      }
      row.show = true;
    },
    //更换指标名称
    changeIndicators(val) {
      val.extractRuleDesc = null;
      if (val.extracName == "年龄") {
        this.IndicatorsShow = false;
      } else {
        if (val == "性别") {
        }
        this.IndicatorsShow = true;
      }
    },
    //处理选择下拉数据
    processData(dataList, selectList) {
      let data = [];
      dataList.forEach((item) => {
        selectList.forEach((item1) => {
          if (item.dictLabel == item1) {
            data.push(item.dictValue);
          }
        });
      });
      return data;
    },
    //条件编辑确定
    handleSure(row) {
      let name = row.extracName;
      row.data = [];
      if (name == "专业") {
        row.data = this.processData(this.majorList, row.extractRuleDesc);
      } else if (name == "擅长领域") {
        row.data = this.processData(this.areasList, row.extractRuleDesc);
      } else if (name == "技术职称") {
        row.data = this.processData(this.technicalList, row.extractRuleDesc);
      } else if (name == "职业资格") {
        row.data = this.processData(this.professionalList, row.extractRuleDesc);
      }
      if (row.extracName == "年龄") {
        if (row.age == "") {
          return this.$message.error("指标内容不能为空");
        } else {
          if (row.show == true) {
            row.show = false;
          }
        }
      } else {
        if (row.extractRuleDesc == "") {
          return this.$message.error("指标内容不能为空");
        } else {
          if (row.show == true) {
            row.show = false;
          }
        }
      }
    },
    //年龄输入框失焦
    inputBlur(row) {
      row.extractRuleDesc = row.age;
      this.IndicatorsShow = true;
    },
    // 删除一行规则
    deleteRow(index, rows) {
      rows.splice(index, 1);
      this.editPerDataList.forEach((item, index) => {
        item.index = index;
      });
    },
    handleClick(index, row) {
      this.checkState = "edit";
      // let data= this.tableData[index]
      this.ruleForm = JSON.parse(JSON.stringify(this.tableData[index]));
      // this.ruleForm = this.tableData[index]
      this.dialogVisible = true;
      this.ruleForm.id = index;
      //   }
      // })
    },
    handleClose() {
      this.dialogVisible = false;
      this.$refs["ruleForm"].resetFields();
    },
    //规则提交
    submit() {
      this.$refs.ruleForm.validate((valid) => {
        let obj={}
        if(this.ruleForm.extractType == 1){
          let extractRuleDesc=[]
          this.editPerDataList.forEach(item =>{
                extractRuleDesc.push((item.extracName + 
                (item.peopleNumber=='<'?'小于':item.peopleNumber=='>'?'大于':':')
                +((item.extractRuleDesc instanceof Array)?item.extractRuleDesc.join(','):item.extractRuleDesc)))
              this.perNameOptions.forEach(item1 =>{
                if(item.extracName==item1.dictLabel){
                  if(item1.dictValue=='sex'){
                    obj[item1.dictValue]=item.extractRuleDesc=="男"?0:1
                  }else if(item1.dictValue=="politicalOutlook"){
                    obj[item1.dictValue]=item.extractRuleDesc=="群众"?0:1
                  }else if(item1.dictValue=='age'){
                    // obj.ageType=item.peopleNumber=='>'?0:item.peopleNumber=='<'?1:2
                    item.peopleNumber=='>'?obj.startAge=item.extractRuleDesc:item.peopleNumber=='='?obj.equalAge=item.extractRuleDesc:obj.endAge=item.extractRuleDesc
                    // obj[item1.dictValue]=item.extractRuleDesc
                  }else{
                    obj[item1.dictValue]=item.data
                  }
                }
              
            })
          });
          // this.rulesData=obj
          this.ruleForm.extractRuleDesc=extractRuleDesc.join(',')
          this.ruleForm.expertInformationSheet=obj
        }else{
          this.ruleForm.expertInformationSheet=''
          this.ruleForm.extractRuleDesc=this.selectExpertList
          if(this.ruleForm.extractType == 3&&this.ruleForm.peopleNumber!=this.ruleForm.expertIdList.length){
            return this.$message.error('选择的专家数量与实际选择专家不相符')
          }
        }
        if (valid) {
          if (this.checkState == "edit") {
            this.$set(
              this.tableData,
              this.ruleForm.id,
              JSON.parse(JSON.stringify(this.ruleForm))
            );
            this.dialogVisible = false;
            this.checkState = "";
          } else {
            let data = JSON.parse(JSON.stringify(this.ruleForm));
            this.tableData.push(data);
            this.dialogVisible = false;
            this.selectExpertList=''
          }
          this.$refs["ruleForm"].resetFields();
        } else {
          return false;
        }
      });
    },
    rulesAdd() {
      this.checkState = "add";
      this.dialogVisible = true;
    },
    getRules() {},
    checkTime() {
      if (this.reviewTime) {
        let start = this.reviewTime[0];
        let end = this.reviewTime[1];
        this.queryForm.reviewTimeStart = start;
        this.queryForm.reviewTimeEnd = end;
        // this.queryForm.reviewTimeStart=this.getData(start)
        // this.queryForm.reviewTimeEnd=this.getData(end)
      } else {
        this.queryForm.reviewTimeStart = "";
        this.queryForm.reviewTimeEnd = "";
      }
    },
    onChangeTime() {
      if (this.reviewTime) {
        this.queryForm.reviewTimeStart = this.reviewTime;
        this.queryForm.reviewTimeEnd = "";
        // this.queryForm.reviewTimeStart=this.getData(start)
        // this.queryForm.reviewTimeEnd=this.getData(end)
      } else {
        this.queryForm.reviewTimeStart = "";
        this.queryForm.reviewTimeEnd = "";
      }
    },
    getData(val) {
      let y = val.getFullYear();
      let m = (val.getMonth() + 1 + "").padStart(2, "0");
      let d = (val.getDate() + "").padStart(2, "0");
      let h = val.getHours() < 10 ? "0" + val.getHours() : val.getHours();
      let mf =
        val.getMinutes() < 10 ? "0" + val.getMinutes() : val.getMinutes();
      return y + "-" + m + "-" + d + " " + h + " " + " : " + mf;
    },
    handleDel(index, row) {
      this.tableData.splice(index, 1);
    },
    //开始抽取
    startPumping() {
      let num =0
      this.tableData.forEach(item =>{
        num += item.peopleNumber
      })
      if(num==this.queryForm.expertNum){
        getSxpertExtract(this.tableData).then((res) => {
          this.personInfo = res;
          this.isDisabled = true;
          let data={}
          data.expertDto = res
          data.ruleDto = this.tableData
          data.monitoringDto={
              extractType:1,
              extractResult:1,
              extractNum:this.queryForm.expertNum
            }
            if (this.$route.query.projectId) {
              data.monitoringDto.proId = this.$route.query.projectId;
            } else {
              data.monitoringDto.planId = this.$route.query.planId;
            }
          geMonitoringAdd(data).then(res =>{
              console.log(res,111)
          })
        });
      }else{
        this.$message({
          type:'error',
          message:'规则人数之和需要和专家数量相同！'
        })
      }
      return false
    },
    replaceCheck() {
      // this.getMonitoring().then(()=>{
        if (this.checkNum > 2) {
        this.$message.error('专家抽取次数已用完，请提交')
      }else{
        if(this.isDisabled==false){
        this.$message({
          type: "error",
          message: "请先抽取专家！",
        });
        }else{
          let num =0
          this.tableData.forEach(item =>{
            num += item.peopleNumber
          })
          if(num==this.queryForm.expertNum){
            this.$confirm("是否确认重新抽取 ？", "重新抽取", {
              confirmButtonText: "确定",
              cancelButtonText: "取消",
              type: "warning",
              customClass: "del_box",
            }).then(() =>{
                getSxpertExtract(this.tableData).then((res) => {
                  this.personInfo = res;
                  this.isDisabled = true;
                  let data={}
                    data.expertDto = res
                    data.ruleDto = this.tableData
                    data.monitoringDto={
                        extractType:1,
                        extractResult:2,
                        extractNum:this.queryForm.expertNum
                      }
                      if (this.$route.query.projectId) {
                          data.monitoringDto.proId = this.$route.query.projectId;
                        } else {
                          data.monitoringDto.planId = this.$route.query.planId;
                        }
                    geMonitoringAdd(data).then(res =>{
                        console.log(res,222)
                        this.getMonitoring();
                    })
                });
            })
          }else{
            this.$message({
              type:'error',
              message:'规则人数之和需要和专家数量相同！'
            })
          }
        }
      }
      // })
    },
    //提交审核
    submitForm() {
      let data = JSON.parse(JSON.stringify(this.queryForm));
      data.expertList = [];
      this.personInfo.map((item) => {
        let array = {
          expertId: item.expertId,
          expertName: item.expertName,
          extractRuleId: item.extractRuleId,
          extractType: item.extractType,
          peopleNumber: item.peopleNumber,
          extractRuleDesc: item.extractRuleDesc,
        };
        data.expertList.push(array);
      });
      // data.expertList=
      if (this.$route.query.projectId) {
        data.proId = this.$route.query.projectId;
        if(this.$route.query.reviewTaskId){
          data.reviewTaskId = this.$route.query.reviewTaskId
        }
      } else {
        data.planId = this.$route.query.planId;
      }
      let enterType = this.$route.query.enterType;
      getTaskAdd(data).then((res) => {
        if (res.code === 200) {
          this.$message.success("提交成功");
          if (enterType == "third") {
          // this.projectTitle = "评审任务/任务详情/抽取专家";
            this.$router.push("/tripartiteReview/reviewTask/reviewTaskView?reviewTaskId=" + data.reviewTaskId);  //回到三方项目详情页
          } else if (enterType == "manage") {
            this.$router.push("/business_manage/manage/details?id=" + data.proId);  //回到大数据项目详情页
          } else if (enterType == "annual") {
            this.$router.push('/business_manage/manage/annualplan/annualProjectPlan?id='+ data.planId) //回到年度计划详情页
          }
        }
      });
    },
    //返回上一页
    backPage() {
      this.$router.back();
    },
    // 新增一行条件
    addPerRow() {
      this.editPerDataList.push({
        extractType: "",
        extractRuleDesc: [],
        extracName: "",
        peopleNumber: "=",
        age: "",
        show: true,
      });
      this.editPerDataList.forEach((item, index) => {
        item.index = index;
      });
    },
    //
    changeType() {
      if (this.ruleForm.extractType == 1) {
        this.editPerDataList = [
          {
            extractType: "",
            extracName: "专业",
            peopleNumber: "=",
            extractRuleDesc: [],
            age: "",
            show: false,
          },
          {
            extractType: "",
            extracName: "擅长领域",
            peopleNumber: "=",
            extractRuleDesc: [],
            age: "",
            show: false,
          },
          {
            extractType: "",
            extracName: "技术职称",
            peopleNumber: "=",
            extractRuleDesc: [],
            age: "",
            show: false,
          },
          {
            extractType: "",
            extracName: "职业资格",
            peopleNumber: "=",
            extractRuleDesc: [],
            age: "",
            show: false,
          },
        ];
      }
    },
    // 获取专家列表
    getertList() {
      getExtInfoList().then((res) => {
        if (res.code == 200) {
          this.erxtList = res.rows;
        }
      });
    },
    //选择专家
    selectExpert(row){
        let expertName=[]
        let name=this.erxtList.filter(item =>(this.ruleForm.expertIdList).indexOf(item.expertId)!=-1)
        name.forEach(item =>{
            expertName.push(item.expertName)
        })
        this.selectExpertList=expertName.join(',')
      
    },
    //专家抽取监控
    getMonitoring(){
      let data={}
        if (this.$route.query.projectId) {
        data.proId = this.$route.query.projectId;
      } else {
        data.planId = this.$route.query.planId;
      }
      return geMonitoringGet(data).then(res =>{
        console.log(res,333)
        if(res){
          this.tableData=res.ruleDto
          this.personInfo=res.expertDto
          if(res.monitoringDto.extractFrequency){
            this.checkNum=parseInt(res.monitoringDto.extractFrequency)
          }
          console.log(99988,this.checkNum);
          this.isDisabled=true
        }
      })
    }
  }
};
</script>

<style lang="scss" scoped>
.annual--plan-container {
  width: 100%;
  padding: 16px;
  height: 100%;
  background: #f5f5f5;
  .container-box {
    // width: 1688px;
    background: #fff;
    padding: 24px;
    .main-title {
      font-size: 18px;
      font-family: PingFang SC, PingFang SC-Medium;
      font-weight: 500;
      color: #000000;
      line-height: 18px;
      // padding:24px
    }
    .project-title{
      display: flex;
      justify-content: space-between;
      .back-btn {
        margin-right: 56px;
        font-size: 14px;
        font-family: PingFang SC, PingFang SC-Regular;
        font-weight: 400;
        color: #333333;
        display: flex;
        align-items: center;
        img {
          margin-right: 7px;
        }
      }
    }
    .right-title {
      // width: 1600px;
      height: 50px;
      line-height: 50px;
      display: flex;
      align-items: center;
      border: 1px solid #ebecef;
      border-right: 0;
      border-left: 0;
      margin: 24px 0 24px;
      img {
        margin-right: 6px;
      }
    }
    .add-btn {
      width: 138px;
      height: 32px;
      background: #3171ee;
      border-radius: 4px;
      font-size: 14px;
      font-family: PingFang SC, PingFang SC-Regular;
      font-weight: 400;
      color: #fff;
      display: flex;
      align-items: center;
      margin: 0 0 24px 0;
      cursor: pointer;
      img {
        margin: 0 7px 0 17px;
        width: 14px;
        height: 14px;
      }
    }
  }
  .person-info-box {
    margin-top: 10px;
    display: block;
    .personI-info-btn {
      display: flex;
      justify-content: center;
      margin-top: 106px;
      & > div {
        width: 196px;
        height: 40px;
        border: 1px solid #d8d8d8;
        box-sizing: border-box;
        border-radius: 4px;
        text-align: center;
        line-height: 40px;
        font-size: 14px;
        cursor: pointer;
      }
      & > :last-child {
        background: #3171ee;
        color: #ffffff;
        margin-left: 24px;
      }
    }
  }
  .table-box {
    margin: 25px 0;
    // width:1600px;
    .state-span {
      display: flex;
      align-items: center;
      .out-line {
        display: inline-block;
        width: 16px;
        height: 16px;
        // opacity: 0.1;
        background: rgba(49, 113, 238, 0.1);
        border-radius: 16px;
        margin-right: 10px;
        span {
          margin: 4px;
          width: 7px;
          height: 7px;
          background: #3171ee;
          border-radius: 16px;
          display: inline-block;
        }
      }
    }
  }
  .bottom-btn {
    display: flex;
    div {
      .el-button {
        font-size: 12px;
        font-family: PingFang SC, PingFang SC-Regular;
        font-weight: 400;
        text-align: LEFT;
        color: #999999;
        line-height: 24px;
        padding: 4px 16px;
      }
    }
    .start-btn,
    .reset-btn {
      cursor: pointer;
      .el-button {
        // width: 88px;
        // height: 32px;
        line-height: 32px;
        background: #3171ee;
        border-radius: 4px;
        font-size: 14px;
        font-family: PingFang SC, PingFang SC-Regular;
        font-weight: 400;
        text-align: center;
        color: #ffffff;
      }
    }
    .reset-btn {
      .el-button {
        background: #ffffff;
        border: 1px solid #3171ee;
        border-radius: 4px;
        color: #3171ee;
        margin: 0 14px;
      }
    }
    .hint {
      display: flex;
      align-items: center;
    }
    .is-disabled {
      background: #ccc !important;
      color: #fff !important;
      border: none !important;
    }
  }
  .person-info {
    display: flex;
    // width: 991px;
    height: 206px;
    background: #ffffff;
    border: 1px solid #ecf2ff;
    padding: 24px;
    margin-top: 24px;
    .person-left {
      // margin-right:60px;
      width: 10%;
      .name-title {
        margin-top: 10px;
        text-indent: 24px;
      }
    }
    .person-right {
      width: 90%;
      .top-box {
        display: flex;
        font-size: 14px;
        font-family: PingFang SC, PingFang SC-Regular;
        font-weight: 400;
        color: #999999;
        .right-top {
          width: 33%;
          div {
            margin-bottom: 10px;
            span {
              display: inline-block;
              margin-left: 10px;
              color: #333333;
            }
          }
        }
      }
      .bottom-box {
        font-size: 14px;
        font-family: PingFang SC, PingFang SC-Regular;
        font-weight: 400;
        color: #999999;
        div {
          margin-bottom: 10px;
          span {
            display: inline-block;
            margin-left: 10px;
            color: #333333;
          }
        }
      }
    }
  }
  .resturn {
    background: #ffffff;
    border: 1px solid #3171ee;
    border-radius: 4px;
    color: #3171ee;
    font-size: 14px;
    font-family: PingFang SC, PingFang SC-Regular;
    font-weight: 400;
    text-align: CENTER;
  }
}
.number-box {
  display: flex;
  width: 218px;
  border: 1px solid #d8d8d8;
  border-radius: 4px;
}

</style>


<style lang='scss'>
.annual--plan-container .container-box .el-form-item .el-input__inner {
  width: 390px;
}
.annual--plan-container .dialog-box .el-form-item .el-input__inner {
  width: 100%;
}
.annual--plan-container .dialog-box .el-form-item .el-textarea__inner {
  width: 100%;
}
.demo-ruleForm{
  .el-tag {
    background: #ecf2ff;
    border: 1px solid #a1c5f8;
    border-radius: 2px;
    font-size: 12px;
    font-family: PingFang SC, PingFang SC-Regular;
    font-weight: 400;
    color: #3171ee;
  }
  .el-tag.el-tag--info .el-tag__close{
      background:#3171ee !important;
      color:#FFF;
  }
}
.del_box {
  width: 400px !important;
  height: 180px !important;
  .el-message-box__header{
    border-bottom:1px solid #fafafa;
  }
  .el-message-box__headerbtn {
    background: url("../../assets/images/icon_dialog_close.png");
    background-size: 100%;
    width: 16px;
    height: 16px;
    .el-message-box__close {
      visibility: hidden;
    }
  }
  .el-message-box__btns{
    margin-top:8px;
  }
  .el-message-box__content {
    padding: 26px 95px;
    font-size: 16px;
    border-bottom:1px solid #fafafa;
    .el-message-box__status.el-icon-warning{
      color: #EA4747;
    }
    .el-message-box__status + .el-message-box__message{
      padding-right: 0;
    }
  }
}
</style>
